<template>
  <PageLayout>
    <template #header>
      <BasicForm :options="queryOptions" @ok="onQueryDataByParams"></BasicForm>
    </template>
    <div class="table-box">
      <div class="head-box">
        <div class="title">财务列表</div>
        <a-space :size="16">
          <a-button type="primary" @click="importFile">数据导出</a-button>
        </a-space>
      </div>
      <div class="bg-fff">
        <!-- :apiFetch="apiFetch"  -->
        <BasicTable
          ref="tableRef"
          :columns="columns"
          :query-params="queryData"
          :apiFetch="postFinancialBillPage"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'action'">
              <a-space class="space-btn--box" :size="10">
                <a class="btn" @click="showDetail(record)">查看详情</a>
              </a-space>
            </template>
          </template>
        </BasicTable>
      </div>
    </div>

    <DetailModal ref="detailModalRef" :data="dataDetail"></DetailModal>
  </PageLayout>
</template>

<script name="finance-manage-list" setup>
import DetailModal from "./components/detail-modal.vue";
import { postFinancialBillPage, postFinancialBillExport } from "@/api/common";
import { useStoreCommonEnum } from "@/store";
import { message } from "ant-design-vue";
const storeCommonEnum = useStoreCommonEnum();
const router = useRouter();
const queryOptions = ref([
  {
    name: "状态",
    type: "select",
    value: [],
    placeholder: "请选择",
    filed: "statusList",
    list: [
      {
        label: "待支付",
        value: "0",
      },
      {
        label: "支付成功",
        value: "1",
      },
      {
        label: "支付失败",
        value: "2",
      },
    ],
    attrs: { mode: "multiple" },
  },
  {
    name: "门店号",
    type: "input",
    value: "",
    placeholder: "请输入",
    filed: "shopNo",
  },
  {
    name: "门店名称",
    type: "input",
    value: "",
    placeholder: "请输入",
    filed: "shopName",
  },
  {
    name: "时间",
    type: "range-picker",
    value: [],
    placeholder: "请选择",
    filed: "rangeDate",
    dateFields: ["startCreateTime", "endCreateTime"],
  },
]);
const columns = [
  {
    title: "序号",
    dataIndex: "index",
    width: "80px",
    customRender: (record) => `${record.index + 1}`,
  },
  {
    title: "支付订单编号",
    dataIndex: "orderNo",
    key: "orderNo",
    width: "200px",
    ellipsis: true,
  },
  {
    title: "应付金额",
    dataIndex: "totalAmount",
    key: "totalAmount",
    width: "150px",
    ellipsis: true,
  },
  // {
  //   title: "平台收益",
  //   dataIndex: "totalPlatformAmountYuan",
  //   key: "totalPlatformAmountYuan",
  //   width: "150px",
  //   ellipsis: true,
  // },
  // {
  //   title: "代理商收益",
  //   dataIndex: "totalAgentAmountYuan",
  //   key: "totalAgentAmountYuan",
  //   width: "150px",
  //   ellipsis: true,
  // },
  {
    title: "支付状态",
    dataIndex: "status",
    key: "status",
    width: "150px",
    ellipsis: true,
    customRender: ({ record }) => (record.status == 0 ? "待支付" : "支付成功"),
  },
  {
    title: "生成日期",
    dataIndex: "createTime",
    key: "createTime",
    width: "200px",
    ellipsis: true,
  },
  {
    title: "门店名称",
    dataIndex: "shopName",
    key: "shopName",
    width: "150px",
    ellipsis: true,
  },
  {
    title: "门店ID",
    dataIndex: "shopId",
    key: "shopId",
    width: "200px",
    ellipsis: true,
  },
  {
    title: "地区",
    dataIndex: "address",
    key: "address",
    width: "150px",
    ellipsis: true,
  },
  {
    title: "老板姓名",
    dataIndex: "shopRealName",
    key: "shopRealName",
    width: "150px",
    ellipsis: true,
  },
  {
    title: "手机号",
    dataIndex: "shopPhone",
    key: "shopPhone",
    width: "150px",
    ellipsis: true,
  },
  // {
  //   title: "代理商",
  //   dataIndex: "agentName",
  //   key: "agentName",
  //   width: "150px",
  //   ellipsis: true,
  // },
  // {
  //   title: "区域经理",
  //   dataIndex: "nickname",
  //   key: "nickname",
  //   width: "150px",
  //   ellipsis: true,
  // },
  // {
  //   title: "客户经理",
  //   dataIndex: "nickname",
  //   key: "nickname",
  //   width: "150px",
  //   ellipsis: true,
  // },

  {
    title: "操作",
    fixed: "right",
    dataIndex: "action",
    key: "action",
    width: 200,
  },
];

const queryData = reactive({});
const tableRef = ref(null);
const onQueryDataByParams = (params) => {
  for (let key in params) {
    queryData[key] = params[key];
  }
  tableRef.value.refreshTableData();
};
const detailModalRef = ref(null);
const dataDetail = ref({});
const showDetail = (record) => {
  dataDetail.value = record;
  setTimeout(() => {
    detailModalRef.value.visible = true;
  }, 0);
};
const importFile = () => {
  if (!tableRef.value.data?.length) {
    message.error("暂无数据");
    return;
  }
  const params = {};

  for (let key in queryData) {
    params[key] = queryData[key];
  }
  postFinancialBillExport(params).then((res) => {
    message.success("导出成功");
  });
};

const dataSource = ref(
  Array.from({ length: 11 }, () => ({
    spaceName: "2121",
  }))
);
</script>

<style lang="less" scoped></style>
